<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入支付渠道名称"
        v-model="queryForm.typeName"
      >
      </el-input>
      <el-button
        class="filter-item"
        @click="doQuery"
        type="primary"
        icon="el-icon-search"
        >查询</el-button
      >
      <el-button
        v-permission="'type:add'"
        class="filter-item"
        style="margin-left: 10px;"
        @click="openSaveDialog"
        type="success"
        icon="el-icon-edit"
        >新增</el-button
      >
    </div>
    <el-table
      v-loading="loading"
      @sort-change="handleSortChange"
      :data="records"
      style="width: 100%"
    >
      <el-table-column prop="rowId" label="ID" width="100" align="center">
      </el-table-column>
      <el-table-column
        prop="typeName"
        label="支付方式名称"
        width="200"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="typeCode"
        label="支付方式"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          {{ Dicts.PAY_CHANNEL[scope.row.typeCode] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="typeIcon"
        label="支付方式图标"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          <img
            :src="$oss(scope.row.typeIcon)"
            alt
            style="width: 60px;height: 60px"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="isThird"
        sortable="custom"
        sort-by="is_third"
        label="是否第三方"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          {{ Dicts.IS_TRUE[scope.row.isThird] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="isOpen"
        sortable="custom"
        sort-by="is_open"
        label="是否启用"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          {{ Dicts.IS_OPEN[scope.row.isOpen] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="seq"
        sortable="custom"
        sort-by="seq"
        label="排序"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        sortable="custom"
        sort-by="create_time"
        label="创建时间"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        class-name="small-padding"
        fixed="right"
        width="250"
      >
        <template slot-scope="scope">
          <el-button
            v-permission="'type:detail'"
            size="mini"
            type="success"
            @click="handleQueryById(scope.row, 'published')"
            icon="el-icon-search"
            circle
          ></el-button>
          <el-button
            v-permission="'type:update'"
            type="primary"
            size="mini"
            @click="handleEditById(scope.row, 'published')"
            icon="el-icon-edit"
            circle
          ></el-button>
          <el-button
            v-permission="'type:delete'"
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.rowId)"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total"
      >
      </el-pagination>
    </div>
    <!-- 新增编辑弹出框 -->
    <el-dialog
      :title="`${saveForm.rowId ? '编辑' : '新增'}支付方式`"
      :visible.sync="dialogSaveFormVisible"
      width="50%"
    >
      <el-form
        :model="saveForm"
        label-width="120px"
        :rules="saveFormRules"
        ref="saveForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="支付方式名称:" prop="typeName">
              <el-input
                v-model="saveForm.typeName"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付方式:" prop="typeCode">
              <el-select
                placeholder="可选"
                style="width: 100%;"
                v-model="saveForm.typeCode"
              >
                <el-option
                  v-for="(val, key) in Dicts.PAY_CHANNEL"
                  :key="key"
                  :label="val"
                  :value="key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商户标识:" prop="appId">
              <el-input v-model="saveForm.appId" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商户编号:" prop="partner">
              <el-input
                v-model="saveForm.partner"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否第三方:" prop="partner">
              <el-switch
                v-model="saveForm.isThird"
                active-text="是"
                inactive-text="否"
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否开启:" prop="isOpen">
              <el-switch
                v-model="saveForm.isOpen"
                active-text="打开"
                inactive-text="关闭"
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商户邮箱:" prop="email">
              <el-input v-model="saveForm.email" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付排序:" prop="seq">
              <el-input-number
                v-model="saveForm.seq"
                :min="1"
                :max="100"
                label="支付方式排序"
                style="width: 100%;"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="支付密钥:" prop="privateKey">
            <el-input
              type="textarea"
              :rows="2"
              v-model="saveForm.privateKey"
              placeholder="支付密钥"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="回调地址:" prop="callbackUrl">
            <el-input
              v-model="saveForm.callbackUrl"
              auto-complete="off"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="备注说明:" prop="remark">
            <el-input
              type="textarea"
              :rows="2"
              v-model="saveForm.remark"
              placeholder="支付方式备注说明"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="支付方式图标" prop="typeIcon">
              <el-upload
                v-model="saveForm.typeIcon"
                class="upload-demo"
                action=""
                :data="{ dir: '/pays/' + this.imgDate }"
                :file-list="files"
                :http-request="upload"
                :on-success="uploadPays"
                :on-exceed="exceed"
                list-type="picture"
                accept="image/*"
                :limit="1"
              >
                <el-button size="small" type="primary">选择图标</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSaveFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePaymentParam">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 详情弹出框 -->
    <el-dialog
      :title="`支付方式详情`"
      :visible.sync="dialogShowFormVisible"
      width="50%"
    >
      <el-form :model="showForm" label-width="120px" ref="showForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="支付方式名称:" prop="typeName">
              {{ showForm.typeName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付方式:" prop="typeCode">
              <template slot-scope="scope">
                {{ Dicts.PAY_CHANNEL[showForm.typeCode] }}
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商户标识:" prop="appId">
              {{ showForm.appId }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商户编号:" prop="partner">
              {{ showForm.partner }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否第三方:" prop="isThird">
              <el-switch
                v-model="showForm.isThird"
                active-text="是"
                inactive-text="否"
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否开启:" prop="isOpen">
              <el-switch
                v-model="showForm.isOpen"
                active-text="打开"
                inactive-text="关闭"
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商户邮箱:" prop="email">
              {{ showForm.email }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付排序:" prop="seq">
              {{ showForm.seq }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="支付密钥:" prop="privateKey">
            {{ showForm.privateKey }}
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="回调地址:" prop="callbackUrl">
            {{ showForm.callbackUrl }}
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="备注说明:" prop="remark">
            {{ showForm.remark }}
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShowFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryPaymentParam,
  deletePaymentParam,
  queryPaymentParamDetail,
  savePaymentParam
} from '@/api/trade'

export default {
  name: 'paymentParam',
  data() {
    return {
      imgDate: '',
      dialogSaveFormVisible: false,
      dialogShowFormVisible: false,
      loading: false,
      queryForm: {
        current: 1,
        pages: 0,
        total: 0,
        size: 10,
        importance: undefined,
        title: undefined
      },
      saveForm: {
        rowId: 0,
        typeName: '',
        typeCode: '',
        isThird: 0,
        appId: '',
        partner: '',
        privateKey: '',
        email: '',
        isOpen: 0,
        remark: '',
        callbackUrl: '',
        seq: 1,
        typeIcon: ''
      },
      showForm: {
        rowId: 0,
        typeName: '',
        typeCode: '',
        isThird: 0,
        appId: '',
        partner: '',
        privateKey: '',
        email: '',
        isOpen: 0,
        remark: '',
        callbackUrl: '',
        seq: 1
      },
      saveFormRules: {
        typeName: [
          { required: true, message: '请输入支付方式名称', trigger: 'blur' }
        ],
        typeCode: [
          { required: true, message: '请输入支付方式编码', trigger: 'blur' }
        ],
        typeIcon: [{ required: true, message: '请选择图片', trigger: 'blur' }]
      },
      files: [],
      records: []
    }
  },
  created() {
    // 初始化一次oss client,如果初始化过一次返回上一次初始化对象
    this.initOssClient().then(_ => {
      this.doQuery()
    })
  },
  methods: {
    exceed() {
      this.$confirm('超出限制，请先删除在选择', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    },
    upload(options) {
      this.uploadForElement(options)
      this.saveForm.typeIcon = options.data.dir + '/' + options.file.name
    },
    uploadPays(response, file, fileList) {
      this.saveForm.typeIcon = response.name
    },
    handleSortChange({ column, prop, order }) {
      this.queryForm.ascs = ''
      this.queryForm.descs = ''
      if (order) {
        if (order === 'ascending') {
          this.queryForm.ascs = column.sortBy
        } else {
          this.queryForm.descs = column.sortBy
        }
      }
      this.queryForm.current = 0
      this.doQuery()
    },
    handleCurrentChange(current) {
      this.queryForm.current = current
      this.doQuery()
    },
    handleSizeChange(size) {
      this.queryForm.size = size
      this.doQuery()
    },
    doQuery() {
      this.loading = true
      queryPaymentParam(this.queryForm).then(({ data: { data } }) => {
        this.queryForm.current = data.current
        this.queryForm.pages = data.pages
        this.queryForm.total = data.total
        this.queryForm.size = data.size
        this.records = data.records
        this.loading = false
      })
      this.imgDate =
        new Date().getFullYear() +
        '' +
        (new Date().getMonth() + 1) +
        '' +
        new Date().getDate()
    },
    handleDelete(rowId) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePaymentParam(rowId).then(({ data: { data, msg } }) => {
          this.doQuery()
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    handleEditById({ rowId }) {
      queryPaymentParamDetail(rowId).then(({ data: { code, data, msg } }) => {
        if (code === 0) {
          this.openSaveDialog()
          this.saveForm = {
            rowId: data.rowId,
            typeName: data.typeName,
            typeCode: data.typeCode,
            isThird: data.isThird.toString(),
            appId: data.appId,
            partner: data.partner,
            privateKey: data.privateKey,
            email: data.email,
            isOpen: data.isOpen.toString(),
            remark: data.remark,
            callbackUrl: data.callbackUrl,
            seq: data.seq,
            typeIcon: data.typeIcon
          }
          this.files = [
            {
              name: this.saveForm.typeIcon,
              url: this.$oss(this.saveForm.typeIcon)
            }
          ]
        }
      })
    },
    savePaymentParam() {
      this.$refs.saveForm.validate(valid => {
        if (valid) {
          savePaymentParam(this.saveForm).then(
            ({ data: { data, msg, code } }) => {
              if (code === 0) {
                this.doQuery()
                this.dialogSaveFormVisible = false
              }
              this.$message({
                showClose: true,
                message: msg,
                type: code === 0 ? 'success' : 'error'
              })
            }
          )
        } else {
          return false
        }
      })
    },
    handleQueryById({ rowId }) {
      queryPaymentParamDetail(rowId).then(({ data: { code, data, msg } }) => {
        if (code === 0) {
          this.openShowDialog()
          this.showForm = {
            rowId: data.rowId,
            typeName: data.typeName,
            typeCode: data.typeCode,
            isThird: data.isThird.toString(),
            appId: data.appId,
            partner: data.partner,
            privateKey: data.privateKey,
            email: data.email,
            isOpen: data.isOpen.toString(),
            remark: data.remark,
            callbackUrl: data.callbackUrl,
            seq: data.seq
          }
        }
      })
    },
    openSaveDialog() {
      this.saveForm = {}
      this.files = []
      this.dialogSaveFormVisible = true
      this.saveForm.seq = 1
      this.$refs.saveForm && this.$refs.saveForm.resetFields()
    },
    openShowDialog() {
      this.showForm = {}
      this.dialogShowFormVisible = true
      this.$refs.showForm && this.$refs.showForm.resetFields()
    }
  },
  components: {}
}
</script>

<style scoped></style>
